<template>
  <div>
    <el-collapse>
      <el-collapse-item title="子流程信息">
        <el-form-item label="实例名称">
          <el-input v-model="elementInstanceName" @change="updateElementInstanceName" />
        </el-form-item>
        <el-form-item label="被调用流程">
          <flow-selector v-model="elementCalledElement" />
        </el-form-item>
        <el-form-item label="继承变量">
          <el-switch v-model="elementInheritBusinessKey" @change="updateElementInheritBusinessKey" />
        </el-form-item>
        <el-form-item label="继承业务键">
          <el-switch v-model="elementInheritVariables" @change="updateElementInheritVariables" />
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="输入参数">
        <text-add-button @click="handleInParamAdd" />
        <el-table :data="elementInParamList">
          <el-table-column label="源参数">
            <template #default="scope">
              <el-input v-model="scope.row.source" />
            </template>
          </el-table-column>
          <el-table-column label="目标参数">
            <template #default="scope">
              <el-input v-model="scope.row.target" />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <text-delete-button @click="handleInParamDelete(scope.row)" />
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item title="输出参数">
        <text-add-button @click="handleOutParamAdd" />
        <el-table :data="elementOutParamList">
          <el-table-column label="源参数">
            <template #default="scope">
              <el-input v-model="scope.row.source" />
            </template>
          </el-table-column>
          <el-table-column label="目标参数">
            <template #default="scope">
              <el-input v-model="scope.row.target" />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <text-delete-button @click="handleOutParamDelete(scope.row)" />
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item title="多实例信息">
        <el-form-item label="多实例类型">
          <el-radio-group v-model="elementCountersignType" @change="handleCountersignTypeChange">
            <el-radio-button label="无" value="null" />
            <el-radio-button label="并行" value="parallel" />
            <el-radio-button label="串行" value="sequential" />
          </el-radio-group>
        </el-form-item>

        <template v-if="elementCountersignType !== 'null'">
          <el-form-item label="基数">
            <el-input v-model="elementLoopCardinality" @change="updateElementLoopCardinality" />
          </el-form-item>
          <el-form-item label="集合">
            <el-input v-model="elementCollection" @change="updateElementCollection" />
          </el-form-item>
          <el-form-item label="元素变量">
            <el-input v-model="elementVariable" @change="updateElementVariable" />
          </el-form-item>
          <el-form-item label="完成条件">
            <el-radio-group v-model="completeConditionType" size="small" @change="generateElementCompleteCondition">
              <el-radio-button label="全部完成" value="all" />
              <el-radio-button label="完成百分比" value="percent" />
              <el-radio-button label="完成数" value="count" />
              <el-radio-button label="表达式" value="expression" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="百分比" v-if="completeConditionType == 'percent'">
            <div style="display: flex; align-items: center; gap: 8px">
              <el-select v-model="completeConditionOperator" style="width: 150px" @change="generateElementCompleteCondition">
                <el-option v-for="(option, index) in completeConditionOptions" :key="index" :label="option.label" :value="option.value" />
              </el-select>
              <el-input-number v-model="completeConditionExpression" controls-position="right" @change="generateElementCompleteCondition" />
              <span>%</span>
            </div>
          </el-form-item>
          <el-form-item label="完成数" v-if="completeConditionType == 'count'">
            <div style="display: flex; align-items: center; gap: 8px">
              <el-select v-model="completeConditionOperator" style="width: 150px" @change="generateElementCompleteCondition">
                <el-option v-for="(option, index) in completeConditionOptions" :key="index" :label="option.label" :value="option.value" />
              </el-select>
              <el-input-number v-model="completeConditionExpression" controls-position="right" @change="generateElementCompleteCondition" />
            </div>
          </el-form-item>
          <el-form-item label="表达式" v-if="completeConditionType == 'expression'">
            <el-input v-model="completeConditionExpression" @change="generateElementCompleteCondition" />
          </el-form-item>
        </template>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
      
<script lang="ts">
import { defineComponent } from 'vue';
import { mapState } from 'pinia';
import modelerStore from '@wf/components/bpmnjs/store/modeler';
import { Element } from 'diagram-js/lib/model/Types';
import {
  setLoopCharacteristics,
  updateLoopCharacteristics,
  getLoopCharacteristics,
  setCompleteConditionValue,
  getCompleteConditionValue,
  getCollectionValue,
  setCollectionValue,
  getVariableValue,
  setVariableValue,
  getLoopCardinalityValue,
  setLoopCardinalityValue
} from '@wf/components/bpmnjs/bo-utils/assigneeUtil';
import {
  setOutParamListValue,
  getOutParamListValue,
  removeOutParamValue,
  getInParamListValue,
  setInParamListValue,
  removeInParamValue,
  getInheritBusinessKeyValue,
  setInheritBusinessKeyValue,
  getInheritVariablesValue,
  setInheritVariablesValue,
  getProcessInstanceNameValue,
  setProcessInstanceNameValue,
  getElementCalledElementValue,
  setElementCalledElementValue
} from '@wf/components/bpmnjs/bo-utils/callActivityUtil';
import FlowSelector from '../../common/FlowSelector.vue';

export default defineComponent({
  name: 'ElementCallActivity',
  components: { FlowSelector },
  data() {
    return {
      elementInstanceName: '',
      elementCalledElement: '',
      elementProcessKey: '',
      elementInheritBusinessKey: false,
      elementInheritVariables: false,
      elementCountersignType: '',
      elementCompleteCondition: '',
      elementLoopCardinality: '',
      elementCollection: '',
      elementVariable: '',
      elementInParamList: [],
      elementOutParamList: [],
      completeConditionType: '',
      completeConditionExpression: '',
      completeConditionOperator: '==',
      completeConditionOptions: [
        {
          label: '大于',
          value: '>'
        },
        {
          label: '大于等于',
          value: '>='
        },
        {
          label: '等于',
          value: '=='
        },
        {
          label: '小于',
          value: '<'
        },
        {
          label: '小于等于',
          value: '<='
        }
      ],
      originCandidates: [],
      candidateUsers: [],
      showAssigneeSelector: false,
      showTimeSelector: false,
      editTime: ''
    };
  },
  computed: {
    ...mapState(modelerStore, ['getActive', 'getActiveId'])
  },
  watch: {
    getActiveId: {
      immediate: true,
      handler() {
        this.elementCountersignType = this.getElementCountersignType();
      }
    },
    elementCountersignType: {
      handler(newVal) {
        if (newVal !== 'null') {
          this.completeConditionType = 'expression';
          this.completeConditionExpression = getCompleteConditionValue(this.getActive as Element);
        }
      },
      immediate: true
    },
    elementCompleteCondition(value) {
      this.handleCompleteConditionChange(value);
    },
    elementCalledElement(value) {
      this.updateElementCalledElement(value);
    }
  },
  mounted() {
    this.elementLoopCardinality = getLoopCardinalityValue(this.getActive as Element) || '';
    this.elementCollection = getCollectionValue(this.getActive as Element) || '';
    this.elementVariable = getVariableValue(this.getActive as Element) || '';
    this.elementInheritBusinessKey = getInheritBusinessKeyValue(this.getActive as Element) || false;
    this.elementInheritVariables = getInheritVariablesValue(this.getActive as Element) || false;
    this.elementInstanceName = getProcessInstanceNameValue(this.getActive as Element) || '';
    this.elementCalledElement = getElementCalledElementValue(this.getActive as Element) || '';
    this.getElementOutParamList();
    this.getElementInParamList();
  },
  methods: {
    getElementCountersignType() {
      const loopCharacteristics = getLoopCharacteristics(this.getActive as Element);
      return loopCharacteristics ? (loopCharacteristics.isSequential ? 'sequential' : 'parallel') : 'null';
    },
    handleCountersignTypeChange(value: string) {
      if (value == 'null') {
        updateLoopCharacteristics(this.getActive as Element);
      } else if (value == 'sequential') {
        setLoopCharacteristics(this.getActive as Element, { isSequential: true });
      } else {
        setLoopCharacteristics(this.getActive as Element);
      }
    },
    handleCompleteConditionChange(value: string) {
      setCompleteConditionValue(this.getActive as Element, value);
    },
    updateElementLoopCardinality(value: string) {
      setLoopCardinalityValue(this.getActive as Element, value);
    },
    updateElementCollection(value: string) {
      setCollectionValue(this.getActive as Element, value);
    },
    updateElementVariable(value: string) {
      setVariableValue(this.getActive as Element, value);
    },
    generateElementCompleteCondition() {
      if (this.completeConditionType == 'all') {
        this.elementCompleteCondition = '${nrOfCompletedInstances/nrOfInstances==1}';
      } else if (this.completeConditionType == 'percent') {
        this.elementCompleteCondition = '${nrOfCompletedInstances/nrOfInstances' + this.completeConditionOperator + Number(this.completeConditionExpression) / 100 + '}';
      } else if (this.completeConditionType == 'count') {
        this.elementCompleteCondition = '${nrOfCompletedInstances' + this.completeConditionOperator + this.completeConditionExpression + '}';
      } else if (this.completeConditionType == 'expression') {
        this.elementCompleteCondition = this.completeConditionExpression;
      }
    },
    getElementInParamList() {
      this.elementInParamList = getInParamListValue(this.getActive as Element);
    },
    getElementOutParamList() {
      this.elementOutParamList = getOutParamListValue(this.getActive as Element);
    },
    handleInParamAdd() {
      setInParamListValue(this.getActive as Element, {
        source: '',
        target: ''
      });
      this.getElementInParamList();
    },
    handleInParamDelete(row: any) {
      removeInParamValue(this.getActive as Element, row);
      this.getElementInParamList();
    },
    handleOutParamAdd() {
      setOutParamListValue(this.getActive as Element, {
        source: '',
        target: ''
      });
      this.getElementOutParamList();
    },
    handleOutParamDelete(row: any) {
      removeOutParamValue(this.getActive as Element, row);
      this.getElementOutParamList();
    },
    updateElementInheritBusinessKey(v: boolean) {
      setInheritBusinessKeyValue(this.getActive as Element, v);
    },
    updateElementInheritVariables(v: boolean) {
      setInheritVariablesValue(this.getActive as Element, v);
    },
    updateElementInstanceName(v: string) {
      setProcessInstanceNameValue(this.getActive as Element, v);
    },
    updateElementCalledElement(v: string) {
      setElementCalledElementValue(this.getActive as Element, v);
    }
  }
});
</script>
      